<template>
	<view class="module">
		<NavTitle :title="title" :backgroundColor='backgroundColor' @leftClick="leftClick"></NavTitle>
		<view class="information_txt flex_Z">
			<text class="f48 c3 fw5">店铺信息</text>
			<!-- <text class="f48 c3 fw5" v-if='shopIndex == 1'>店铺信息</text>
			<text class="f48 c3 fw5" v-else>品牌信息</text> -->
		</view>
		<view class="">
			<view class="content flex_Z">
				<view class="flex_dq">
					<text class="f28 c3 fw5">店铺名称</text>
					<text class="tishi"> *</text>
				</view>
				<u--input placeholder="请输入" fontSize="14" color="#666666" border="none " v-model.trim="name"
					clearable></u--input>
			</view>
			<view class="describe">
				<view class="">
					<image :src="baseUrl + '/static/ymimage/remind.png'" class="remind" mode="aspectFill"></image>
				</view>
				<text class="">不得使用"旗舰"、"专卖"、"专营"、"官方"、"直营"、"官字"、"官方认证"、"官方授权"、"特许经营"、"特约经销"或其他带有类似含义的内容</text>
			</view>
		</view>
		<view class="content">
			<view class="flex_Z">
				<view class="flex_dq">
					<text class="f28 c3 fw5">公司外部入口实景照片 </text>
					<text class="tishi"> *</text>
				</view>
			</view>
			<view class="">
				<u-upload :fileList="fileList1" @afterRead="afterRead($event,'logo')" @delete="deletePic($event,'logo')"
					name="1" :maxCount="1" :maxSize="6 *1024 *1024" @oversize="overSize">
					<view class="content_r mart20 flex_c">
						<image :src="baseUrl +'/static/ymimage/sbzc.png'" mode="aspectFit"></image>
					</view>
				</u-upload>
			</view>
		</view>
		<view class="content flex_Z">
			<view class="flex_dq">
				<text class="f28 c3 fw5">公司内部办公环境照片 </text>
				<text class="tishi"> *</text>
			</view>
			<text class="content_tip">前台照、办公区域照各一张</text>
			<view class="xuanze1 flex_dq">
				<view class="uploads flex_c">
					<u-upload :fileList="fileList2" @afterRead="afterRead($event,'zpt')"
						@delete="deletePic($event,'zpt',)" name="2" :maxCount="1" :maxSize="6 *1024 *1024"
						@oversize="overSize">
						<view class=" flex_ZC">
							<image class="uploadimg" :src="baseUrl +'/static/icon/addimg.png'" mode="aspectFill">
							</image>
							<text class="f20 c9">前台照</text>
						</view>
					</u-upload>
				</view>
				<view class="uploads flex_c">
					<u-upload :fileList="fileList3" @afterRead="afterRead($event,'hjt')"
						@delete="deletePic($event,'hjt',)" name="3" :maxCount="1" :maxSize="6 *1024 *1024"
						@oversize="overSize">
						<view class=" flex_ZC">
							<image class="uploadimg" :src="baseUrl +'/static/icon/addimg.png'" mode="aspectFill">
							</image>
							<text class="f20 c9">办公区域照</text>
						</view>
					</u-upload>
				</view>
			</view>
		</view>
		<view class="" v-if="false">
			<view class="" v-for="(item,index) in remindLength" :key="index">
				<storeMsg></storeMsg>
			</view>
			<view class="certification mart20" @click="addBrand">
				<image :src="baseUrl +'/static/ymimage/iconAdd.png'" class="iconAdd" mode="aspectFill"></image>
				<text>添加更多品牌</text>
			</view>
			<view class=" content flex_Z">
				<view class="flex_dq">
					<text class="f28 c3 fw5">品牌授权链路 </text>
					<text class="tishi"> *</text>
					<text class="tishi1">请上传商标授权书，授权链路不超过2级</text>
				</view>
				<view class="describe">
					<view class="">
						<image :src="baseUrl + '/static/ymimage/remind.png'" class="remind" mode="aspectFill"></image>
					</view>
					<text
						class="">多级授权时，各级授权书均需上传(从品牌方授权至开店公司止。如:品牌方→A公司，A公司→开店公司为一个完整授权链，2份授权书均需上传，可每份单独上传或整理合并后上传)</text>
				</view>
			</view>
			<view class="flex_dq">
				<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" :maxCount="6"
					multiple :maxSize="6 *1024 *1024" @oversize="overSize" width="320" height="190">
					<view class="content_r mart20 flex_c">
						<image :src="baseUrl +'/static/ymimage/sbzc.png'" mode="aspectFit"></image>
					</view>
				</u-upload>
				<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" :maxCount="6"
					multiple :maxSize="6 *1024 *1024" @oversize="overSize" width="320" height="190">
					<view class="content_r mart20 flex_c">
						<image :src="baseUrl +'/static/ymimage/sbzc.png'" mode="aspectFit"></image>
					</view>
				</u-upload>
			</view>
			<view class="content flex_z">
				<view class="flex_dq">
					<text class="f28 c3 fw5">授权有效期限</text>
					<text class="tishi"> *</text>
					<text class="tishi1">仅需填写截止日期</text>
				</view>
				<view class="describe">
					<view class="">
						<image :src="baseUrl + '/static/ymimage/remind.png'" class="remind" mode="aspectFill"></image>
					</view>
					<text class="">请严格按照授权书中标明的有效期填写(多级授权链需填写其中最短一级的有效期)</text>
				</view>
				<view class="term_box flex_ld" @click="show = true">
					<text v-if="!endTerm" class="change_state ">选择日期</text>
					<text v-else :class="endTerm?'active':'change_state'">123</text>
					<image :src="baseUrl +'/static/ymimage/xuanze.png'" class="xuanze" mode="aspectFill"></image>
				</view>
			</view>
			<view class="information_txt flex_Z">
				<text class="f48 c3 fw5">店铺信息</text>
			</view>
			<view class="">
				<view class="content flex_Z">
					<view class="flex_dq">
						<text class="f28 c3 fw5">店铺名称</text>
						<text class="tishi"> *</text>
					</view>
					<view class="storeGrid">
						<u--input placeholder="请输入" fontSize="14" color="#666666" border='none'
							v-model.trim="ocrIdentityInfo.id_card_name" clearable></u--input>
						<u--input placeholder="请输入" fontSize="14" color="#666666" border='none'
							v-model.trim="ocrIdentityInfo.id_card_name" clearable></u--input>
						<uni-data-select v-model="value" :localdata="range" @change="change"></uni-data-select>
					</view>
				</view>
				<view class="describe">
					<view class="">
						<image :src="baseUrl + '/static/ymimage/remind.png'" class="remind" mode="aspectFill"></image>
					</view>
					<text class=""
						v-if="shopIndex == 2">专营店店铺名称命名规则:企业商号+类目+专营店(如:明旭家居生活专营店)。请严格按照规则命名，不可添加地区或行业性质等无关词汇</text>
					<text class=""
						v-if="shopIndex == 3">专卖店店铺名称命名规则:商标名/品牌名+企业商号+专营店(例如:华为明旭专卖店)。请严格按照规则命名，不可添加地区或类目词等无关词汇</text>
					<text class=""
						v-if="shopIndex == 4">旗舰店店铺名称命名规则:商标名/品牌名+类目(可不填)+旗舰店/官方旗舰店(如:明旭户外装备旗舰店)。请严格按照规则命名，不可添加地区或修饰词等无关词汇</text>
				</view>
			</view>
		</view>
		<view class="btns flex_ld">
			<text class="sign_out" @click="leftClick">上一步</text>
			<view class="service flex_c">
				<text @click="$u.debounce(nextStep, 300)">下一步</text>
			</view>
		</view>
		<view class="empty3"></view>
		<u-datetime-picker :show="show" mode="date" :minDate="1735660800000" @cancel="cancels"
			@confirm="confirms"></u-datetime-picker>




	</view>
</template>

<script>
	import {
		settledFiveSave
	} from '@/api/settled.js'
		import UploadFile from '../../common/upload'
	import storeMsg from './storemsg.vue'
	import {
		baseURL
	} from "../../utils/request.js"
	export default {
		data() {
			return {
				title: "填写店铺信息",
				backgroundColor: '',
				baseUrl: this.$imageBaseUrl,
				name: "",
				logo: "",
				front_desk_image: "",
				work_image: '',
				fileSide: '',
				shopIndex: 0,
				endTerm: false,
				fileList1: [],
				fileList2: [],
				fileList3: [],
				show: false,
				remindLength: 1,
				value: 1,
				range: [{
						value: 0,
						text: "篮球"
					},
					{
						value: 1,
						text: "足球"
					},
					{
						value: 2,
						text: "游泳"
					},
				],
				seller_id: "",
				modifyState:false
			}
		},
		components: {
			storeMsg
		},
		onLoad(options) {
			// this.seller_id = 5
			if (options.data) {
				let data = JSON.parse(options.data)
				if(data.modifyState){
					this.modifyState = data.modifyState
					let ymData = JSON.parse(uni.getStorageSync('ymShopDetails')) || {}
					this.front_desk_image = ymData.front_desk_image
					this.work_image = ymData.work_image
					this.logo = this.getPathAfterCom(ymData.logo)
					this.name = ymData.name
					this.fileList1.push({
						'thumb': ymData.logo,
						'status': 'success'
					})
					this.fileList2.push({
						'thumb': ymData.front_desk_image,
						'status': 'success'
					})
					this.fileList3.push({
						'thumb': ymData.work_image,
						'status': 'success'
					})
				}
				
				this.seller_id = data.id
				
			}
			if (options.id) {
				this.seller_id = options.id
			}
		},
		methods: {
			getPathAfterCom(url) {
				const parts = url.split('.com');
				return parts.length > 1 ? parts[1] : '';
			},
			
			change(e) {
				console.log("e:", e);
			},
			addBrand() {
				console.log(132);
				this.remindLength += 1
			},
			leftClick() {
				//获取页面栈的长度
				const canNavBack = getCurrentPages()
				console.log(canNavBack.length);
				// 判断是否刷新了浏览器，刷新了浏览器，页面栈只有当前一个
				if (canNavBack.length > 1) {
					uni.navigateBack({
						delta: 1
					})
				} else {
					uni.switchTab({
						url: '/pages/index/cloudCatIndex'
					})
				}
			},
			// 删除图片
			deletePic(event, side) {
				console.log(event);
				this[`fileList${event.name}`].splice(event.index, 1);
				if (this.fileSide == 'zpt') {
					this.front_desk_image = datainfo.data.url
				} else if (this.fileSide == 'hjt') {
					this.work_image = datainfo.data.url
				} else {
					this.logo = datainfo.data.url
				}
			},
			// 新增图片
			async afterRead(event, side) {
				uni.showLoading({
					title: '加载中',
					mask: true
				});

				const upload = new UploadFile()
				await upload.afterRead(event).then(res => {
					this[`fileList${event.name}`] = res.filelist
					if (side == 'logo') {
						this.logo = res.halfRoadRoute[0]
					} else if (side == 'zpt') {
						this.front_desk_image = res.halfRoadRoute[0]
					} else if (side == 'hjt') {
						this.work_image = res.halfRoadRoute[0]
					}
					uni.hideLoading();
				})
			},
			ruleValidation() {
				if (this.fileList1.length <= 0) {
					uni.$u.toast('请上传公司外部入口照片');
					return false;
				}
				if (this.fileList2.length <= 0) {
					uni.$u.toast('请上传店铺前台图');
					return false;
				}
				if (this.fileList3.length <= 0) {
					uni.$u.toast('请上传办公区域图');
					return false;
				}
				if (uni.$u.test.isEmpty(this.name)) {
					uni.$u.toast('请输入店铺名称');
					return false;
				}
				return true;
			},
			// 下一步
			nextStep() {
				if (this.ruleValidation()) {
					uni.showLoading({
						title: '',
						mask: true
					});
					const data = {
						front_desk_image: this.front_desk_image,
						work_image: this.work_image,
						cover: this.logo,
						seller_id: this.seller_id,
						name: this.name,
						mask:1
					}
					console.log(data);
					settledFiveSave(data).then(res => {
						console.log(res);
						if (res.code == 1) {
							const data = {
								seller_id:this.seller_id,
							}
							if(this.modifyState){
								data.modifyState = true
							}
							uni.navigateTo({
								url: '/pageYm/ymJoin/openAccounts?data=' + JSON.stringify(data),
								success() {
									uni.hideLoading()
								}
							})
						}
					})
				}



				// uni.setStorageSync('qualifications', this.halfRoadRoute)

			},
		},
		// 页面滚动
		onPageScroll: function(e) {
			const scrollTop = e.scrollTop; // 获取页面滚动位置
			// 根据滚动位置修改状态栏样式
			if (scrollTop > 20) {
				this.backgroundColor = '#ffffff';
			} else {
				this.backgroundColor = '';
			}
			// console.log("滚动距离为：" + e.scrollTop);
		},

	}
</script>

<style scoped>
	.module {
		width: 750rpx;
		margin: 0 auto;
		padding: 0 32rpx;
		
	}

	.describe {
		background: rgba(250, 110, 1, 0.1);
		border-radius: 10rpx;
		font-size: 22rpx;
		color: #FA6E01;
		margin: 8rpx 0;
		padding: 8rpx 16rpx;
		display: flex;
		align-items: flex-start;
	}

	.remind {
		width: 22rpx;
		height: 22rpx;
		margin-right: 8rpx;
		margin-top: 7rpx;
	}

	.information_txt {
		width: 686rpx;
		padding: 16rpx 0;
	}

	.tishi {
		font-size: 28rpx;
		color: #FA6E01;
		margin-left: 6rpx;
	}



	.content {
		width: 686rpx;
		box-shadow: inset 0rpx -1rpx 0rpx 0rpx rgba(0, 0, 0, 0.05);
		margin: 20rpx 0;
		
	}

	.certification {
		width: 686rpx;
		height: 68rpx;
		border-radius: 8rpx;
		border: 1rpx dotted #D9D9D9;
		text-align: center;
		line-height: 68rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #666666;

	}

	.storeGrid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 10rpx;
		margin-top: 20rpx;
	}

	.iconAdd {
		width: 20rpx;
		height: 20rpx;
		margin-right: 10rpx;
	}

	.tishi1 {
		font-weight: 400;
		font-size: 22rpx;
		color: #999999;
	}

	.content_r {
		width: 160rpx;
		height: 160rpx;
		border: 1rpx solid rgba(0, 0, 0, 0.1);
		border-radius: 20rpx;
		text-align: start;
		margin: 32rpx 0 0;
	}

	.content_r>image {
		width: 160rpx;
		height: 160rpx;
	}

	.xuanze {
		width: 12rpx;
		height: 24rpx;
	}

	.change_state {
		font-size: 28rpx;
		color: #c0c4cc;
	}

	.term_box {
		width: 686rpx;
		margin: 20rpx 0;
	}

	.change_state {
		font-size: 28rpx;
		color: #c0c4cc;
	}

	/* /deep/.u-upload {
		display: flex;
		flex: 0;
		margin-right: 40rpx;
	} */
/deep/.u-upload__deletable {
		height: 24px !important;
		width: 24px !important;
	}
	/deep/.u-input{
		z-index: 6;
	}
	
	.btns {
		position: fixed;
		bottom: 0rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 690rpx;
		height: 150rpx;
		background: #f8f8f8;
	}

	.sign_out {
		width: 158rpx;
		height: 88rpx;
		font-size: 32rpx;
		color: #333333;
		line-height: 88rpx;
		text-align: center;
		background: #FFFFFF;
		font-weight: 500;
		border-radius: 20rpx;
		border: 2rpx solid rgba(153, 153, 153, 0.18);
	}

	.service>text {
		width: 504rpx;
		height: 88rpx;
		line-height: 88rpx;
		font-size: 32rpx;
		color: #333333;
		font-weight: 500;
		text-align: center;
		background: #FFCC28;
		border-radius: 20rpx;
	}

	.content_tip {
		font-size: 20rpx;
		color: #999999;
		margin: 10rpx 0 20rpx;
	}

	.uploads {
		width: 202rpx;
		height: 202rpx;
		background: #F3F3F3;
		border-radius: 8rpx;
		margin-right: 24rpx;
	}

	.uploadimg {
		width: 56rpx;
		height: 56rpx;
		margin-bottom: 16rpx;
	}

	.xuanze1 {
		padding: 10rpx 0 20rpx;
	}
	/* #ifdef MP-ALIPAY */
	/deep/.u-input__content__field-wrapper__field{
		background: transparent!important;
	}
	/* #endif */
</style>